﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Ecommerce</title>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900%7CRoboto+Condensed:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/plugins/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/Magnific-Popup/magnific-popup.css">
    <link rel="stylesheet" href="assets/plugins/animate-css/animate.min.css">
    <link rel="stylesheet" href="assets/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/custom.css">
</head>

<body>
    <!-- 引入头部的部分 -->
    <div th:include="/front/header"></div>

    <!--  页标题 -->
    <section class="banner-slider">
        <div class="slider-inner-wrap">

            <div class="owl-carousel banner-carousel1">


                <!-- 单滑块包装 -->
                <div class="single-slider-wrap" data-bg-img='assets/img/banner/bannar1-img1.png'>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="banner-image" data-trigger="parallax_layers">
                                    <img src="assets/img/banner/chare.png" alt="" data-depth="0.5">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- 滑块的文本 -->
                                <div class="single-slider-text" th:object="${goodsMap}">
                                    <span><a href="shop-5col">吉他</a></span>
                                    <h1>正品YAMAHA雅马哈FG800单板</h1>
                                    <p>早已确定的事实是，读者会因页面布局中的可读内容而分心 </p>
                                    <a th:href="@{/front/queryByGoods(goodsId=${goodsMap.goodsId})}" class="btn">去购买</a>
                                </div>
                                <!-- 滑动条结束 -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 单滑块包装 -->

                <!-- 单滑块包装 -->
                <div class="single-slider-wrap" data-bg-img='assets/img/banner/bannar1-img2.png'>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="banner-image" data-trigger="parallax_layers">
                                    <img src="assets/img/banner/bag.png" alt="" data-depth="0.5">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- 滑块的文本 -->
                                <div class="single-slider-text" th:object="${goodsMapF}">
                                    <span><a href="shop-5col">吉他</a></span>
                                    <h1>Saga吉他sf700c萨伽单板</h1>
                                    <p>早已确定的事实是，读者会因页面布局中的可读内容而分心。</p>
                                    <a th:href="@{/front/queryByGoodsF(goodsId=${goodsMapF.goodsId})}" class="btn">去购买</a>
                                </div>
                                <!-- 滑动条结束 -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 单滑块包装 -->

                <!-- 单滑块包装 -->
                <div class="single-slider-wrap" data-bg-img='assets/img/banner/bannar1-img2.png'>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="banner-image" data-trigger="parallax_layers">
                                    <img src="assets/img/banner/bag.png" alt="" data-depth="0.5">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <!-- 滑块的文本 -->
                                <div class="single-slider-text" th:object="${goodsMapJ}">
                                    <span><a href="">吉他</a></span>
                                    <h1>泰勒Taylor 110/114CE 210/214CE 224 DLX</h1>
                                    <p>早已确定的事实是，读者会因页面布局中的可读内容而分心。</p>
                                    <a th:href="@{/front/queryByGoodsJ(goodsId=${goodsMapJ.goodsId})}" class="btn">去购买</a>
                                </div>
                                <!-- 滑动条结束 -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 单滑块包装 -->
            </div>

        </div>
    </section>
    <!-- 旗区末端 -->

    <!-- 开始收集部分 -->
    <section class="pt-40 pb-70">
        <div class="collection-inner">
            <div class="container">
                <div class="row">




                </div>
            </div>
        </div>
    </section>
    <!-- 收集结束段 -->

    <!--特色项目部分 -->
    <section class="pb-20">
        <div class="container">
            <div class="row">
                <div class="col">
                <!-- 节标题 -->
                    <div class="section-title-wrap">
                        <div class="section-title">
                            <h2>特色商品<span>2020</span></h2>
                            
                        </div>
                    </div>
                <!-- 章节标题结束 -->
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6"  th:each="g:${goodsList}">
                    <!-- 单一特征的内在 -->
                    <div class="single-feature-inner">
                        <div class="row align-items-center">
                            <div class="col-sm-6">
                                <a th:href="@{/front/search-result(categoryId=*{g.category.categoryId})}">
                                    <!-- 特征图像长 -->
                                    <div class="featured-item-image feature-small">
                                        <img class='normal-state' data-rjs="2" src="assets/img/featuerd/featured1-b.jpg" alt="">
                                        <img class='hover-state' data-rjs="2" src="assets/img/featuerd/featured1.jpg" alt="">
                                        <!-- 结束特征图像长 -->
                                    </div>
                                </a>
                            </div>
                            <div class="col-sm-6">
                                <!-- 特色内容 -->
                                <div class="featured-content content-left">
                                    <a th:href="@{/front/search-result(categoryId=*{g.category.categoryId})}">
                                        <h3 th:text="${g.category.categoryName}"></h3></a>
                                </div>
                                <!-- 特性内容结束 -->
                            </div>
                        </div>
                    </div>
                    <!-- 结束单一功能内页 -->
                </div>
            </div>
        </div>
    </section>
    <!-- 特色项目部分结束 -->
    
    <!-- 新到货 -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col">
                <!-- 章节标题 -->
                    <div class="section-title-wrap">
                        <div class="section-title">
                            <h2>新到货<span>本季</span></h2>
                            
                        </div>
                    </div>
                <!-- 章节标题结束 -->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-12 col-lg-3"  th:each="g:${goodsList}">

                    <!-- 单一的产品 -->
                    <div class="single-product">
                        <div class="product-item">
                            <div class="product-thumb">
                                <!-- 产品形象 -->
                                <div class="product-image">
                                    <a th:href="@{/front/shop-details-variable(goodsId=${g.goodsId})}">
                                        <img th:src="${g.goodsPhoto}" alt="">
                                     </a>
                                </div>
                                <!-- 产品形象结束 -->


                                </div>
                                <!-- 产品按钮结束-->
                                <!-- 产品标题 -->
                                <div class="product-title">
                                    <a th:href="@{/front/shop-details-variable(goodsId=${g.goodsId})}"><h4 th:text="${g.goodsName}"></h4></a>
                                </div>
                                <!-- 产品标题结束 -->
                            </div>

                            <!-- 产品信息-->
                            <div class="product-info">
                                <div class="product-price" th:text="${g.goodsSize.goodsSizeName}"><h5></h5></div>
                            </div>
                             <!-- 产品信息结束-->
                        </div>
                    </div>
                    <!-- 单品端 -->

                </div>
            </div>
        </div>
    </section>
    <!-- 新到终点 -->


    <!-- 页脚区-->
    <!-- 引入页面尾部的部分 -->
    <div th:include="/front/footer"></div>
    <!-- 页脚区域结束 -->
    
      <!-- 返回顶部 -->
    <div class="back-to-top">
        <a href="#">
            <div class="back-toop-tooltip"><span>返回顶部</span></div>
            <div class="top-array"></div>
            <div class="top-line"></div>
        </a>
    </div>
    <!-- 返回顶部 -->

    <!-- 模态快速视图-->
    <div class="modal-quickview-container">
        <div class="quick-view-content-wrap">
            <div class="modal-window-overlay"></div>
            <div class="quick-view-content">
                <div class="modal-window-close">
                    <img src="assets/img/icons/close-button.svg" class="svg" alt="">
                </div> 
                <div class="quick-view-content-inner">
                    <div class="row align-items-center">
                        <div class="col-lg-7">
                            <!-- 产品启动滑块 -->
                            <div class="shop-product-slider-wrap">
                                <!-- 开始铺顶侧滑块 -->
                                 <div class="swiper-container quick-product-gallery">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view1.png" alt="" data-rjs="2" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view2.png"  alt="" data-rjs="2" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view3.png" alt="" data-rjs="2" />
                                        </div>
                                        <div class="swiper-slide">
                                            <img class='' src="assets/img/shop/quick-view4.png" alt="" data-rjs="2" />
                                        </div>
                                    </div>
                                </div>
                                 <!--  年底的滑块顶部侧 -->
                                
                                <!-- 启动滑块底部侧 -->
                                <div class="swiper-container quick-product-thumbs">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav1.png" data-rjs="2" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav3.png" data-rjs="2" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav4.png" data-rjs="2" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="assets/img/shop/details-nav5.png" data-rjs="2" alt="">
                                        </div>
                                    </div>
                                </div>
                                <!-- 端面滑块底面 -->
                            </div>
                            <!-- 商店结束产品滑块 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
     <!--模态快速视图结束-->

    


    <!-- JS Files -->
   <!-- ==== JQuery 3.3.1 js file==== -->
   <script src="assets/js/jquery-3.3.1.min.js"></script>
   <script src="assets/js/bootstrap.bundle.min.js"></script>
   <script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
   <script src="assets/plugins/parsley/parsley.min.js"></script>
   <script src="assets/plugins/retinajs/retina.min.js"></script>
   <script src="assets/plugins/parallax/parallax.js"></script>
   <script src="assets/plugins/parallax/parallaxh.min.js"></script>
   <script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
   <script src="assets/plugins/Magnific-Popup/jquery.magnific-popup.min.js"></script>
   <script src="assets/plugins/waypoints/jquery.counterup.min.js"></script>
   <script src="assets/plugins/isotope/packery.pkgd.min.js"></script>
   <script src="assets/plugins/swiper/swiper.min.js"></script>
   <script src="assets/plugins/countdown/jquery.countdown.min.js"></script>
   <script src="assets/plugins/Magnific-Popup/jquery.elevateZoom-3.0.8.min.js"></script>
   <script src="assets/plugins/tweenmax/TweenMax.min.js"></script>
   <script src="assets/plugins/text-animation/anime.min.js"></script>
   <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyB2D8wrWMY3XZnuHO6C31uq90JiuaFzGws"></script>
   <script src="assets/js/scripts.js"></script>
   <script src="assets/js/custom.js"></script>
</body>
</html>